<script lang="ts">
export default {
  name: 'completedOrder',
  description: '已完成订单',
};
</script>

<script setup lang="ts">
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import { OrderQuery, OrderAwait } from '@/api/order/types';
import { typeOption, getOrderAwaitList } from '@/api/order/index';
import { casualCheckRecordAdd } from '@/api/system/examineRecord/index';
import SettlementFrom from "@/views/order/components/settlementFrom.vue";
import OrderFrom from "@/views/order/components/orderFrom.vue";
import ExamineList from "@/views/order/components/examineList.vue";

const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
const refFrom = ref();
const refSetFrom = ref();
const examineListRef = ref();
const state = reactive({
  loading: true,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as OrderQuery,
  typeOptions: [] as OptionType[],
  auditStatusOptions: [
    {value: '0', label: '未审核'},
    {value: '1', label: '审核中'},
    {value: '2', label: '审核成功'}
  ] as OptionType[],
  settlementStatusOptions: [
    {value: '1', label: '未结算'},
    {value: '2', label: '已结算'}
  ] as OptionType[],
  orderTime: [] as string[],
  orderList: [] as OrderAwait[],
  total: 0,
});

const { loading, queryParams, typeOptions, auditStatusOptions, settlementStatusOptions, orderTime, orderList, total } =
  toRefs(state);
/**
 * 下拉框查询
 */
function options() {
  typeOption().then((res: any) => {
    typeOptions.value = res.data;
  });
}

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  queryParams.value.orderStatr = undefined;
  queryParams.value.orderEnd = undefined;
  if (orderTime.value.length == 2) {
    queryParams.value.orderStatr = proxy
      .$moment(orderTime.value[0])
      .format('YYYY-MM-DD HH:mm');
    queryParams.value.orderEnd = proxy
      .$moment(orderTime.value[1])
      .format('YYYY-MM-DD HH:mm');
  }
  queryParams.value.status = 2;
  getOrderAwaitList(queryParams.value).then((res: any) => {
    orderList.value = res.data.list;
    total.value = res.data.total;
    loading.value = false;
  });
}
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.value.auditStatus = undefined
  queryParams.value.settlementStatus = undefined
  orderTime.value = [];
  handleQuery();
}
function submitOk() {
  resetQuery();
}
/**
 * 发起流程审批
 */
function handleExamine(row: any) {
  ElMessageBox.prompt('备注', '提交审核', {
    confirmButtonText: '确定',
    showCancelButton: false,
    showClose: false,
    inputType: 'textarea',
    inputErrorMessage: '请输入备注',
  }).then(({ value }) => {
    let param = {
      businessId: row.id as number,
      businessType: '1',
      remark: value as string,
    };
    casualCheckRecordAdd(param).then((res) => {
      ElMessage.success('提交审核成功');
      submitOk();
    });
  });
}
/**
 * 详情
 */
function handleDetails(row: any) {
  refFrom.value.details(row);
  refFrom.value.disabled = true;
  refFrom.value.dialog.visible = true;
  refFrom.value.dialog.title = '用工订单详情';
}
/**
 * 结算
 */
function settlement(row: any) {
  refSetFrom.value.dialog.visible = true;
  refSetFrom.value.dialog.title = '用工订单结算';
  refSetFrom.value.formData = row;
  refSetFrom.value.reset(row);
}

function getExamineList(row: any) {
  console.log("row", row.id)
  examineListRef.value.open(row.id);
}

onMounted(() => {
  options();
  handleQuery();
});
</script>

<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用工类型" prop="typeId">
          <el-select style="width: 200px;" v-model="queryParams.typeId" placeholder="请选择用工类型">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号" prop="code">
          <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="订单标题" prop="code">
          <el-input v-model="queryParams.name" placeholder="请输入订单标题" />
        </el-form-item>
        <el-form-item label="下单账号" prop="code">
          <el-input v-model="queryParams.principalAccountName" placeholder="请输入下单账号" />
        </el-form-item>
        <el-form-item label="审核状态" prop="typeId">
          <el-select style="width: 200px;" v-model="queryParams.auditStatus" placeholder="请选择审核状态">
            <el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算状态" prop="typeId">
          <el-select style="width: 200px;" v-model="queryParams.settlementStatus" placeholder="请选择结算状态">
            <el-option v-for="item in settlementStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="用工时间" prop="orderTime">
          <el-date-picker v-model="orderTime" type="datetimerange" format="YYYY-MM-DD HH:mm" start-placeholder="用工开始时间" end-placeholder="用工结束时间" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card>
      <el-table ref="dataTableRef" v-loading="loading" :data="orderList" highlight-current-row border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单编号" prop="orderCode" width="150" />

        <el-table-column label="项目类型" prop="orderUpstreamType" width="150" >
          <template #default="scope">
            <p>{{ scope.row.orderUpstreamType ? scope.row.orderUpstreamType === "upstream" ? "上游" : "缺编" : "/" }}</p>
          </template>
        </el-table-column>
        <el-table-column label="上游单位名称" prop="upstreamName" width="150" />
        <el-table-column label="上游金额" prop="upstreamMoeny" width="150" />
        <el-table-column label="需求人数" prop="numberPeopleNeed" width="150" />
        <el-table-column label="人均费用" prop="perCapitaCost" width="150" />
        <el-table-column label="实际编制人数" prop="actualEstablishment" width="150" />
        <el-table-column label="缺编人数" prop="vacancy" width="150" />
        <el-table-column label="编制内应收金额" prop="receAmount" width="150" />
        <el-table-column label="是否另外付费" prop="isWyFee" width="150">
          <template #default="scope">
            <p v-if="scope.row.orderUpstreamType == 'upstream'">/</p>
            <p v-if="scope.row.orderUpstreamType == 'vacancy'">{{ scope.row.isWyFee == 1 ? '是' : '否' }}</p>
          </template>
        </el-table-column>

        <el-table-column label="用工标题" prop="name" min-width="150" />
        <el-table-column label="用工类型" prop="typeName" width="160" />
        <el-table-column label="服务标签" prop="labelName" width="190">
          <template #default="scope">
            <p v-if="!scope.row.labelName">无</p>
            <el-tag style="margin-left: 2px" v-else v-for="item in scope.row.labelName.split(',')" :key="item">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单类型" prop="principalTypeName" width="160" />
        <el-table-column label="下单名称" prop="principalName" width="200" />
        <el-table-column label="下单账号" prop="principalAccountName" width="200" />
        <el-table-column label="用工地址" prop="address" width="160" />
        <el-table-column label="用工时间" prop="orderStatr" width="280">
          <template #default="scope">
            <span>{{ scope.row.orderStatr + ' / ' + scope.row.orderEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用工人数" prop="orderQuantity" width="160" />
        <el-table-column label="抢单人数" prop="qdQuantity" width="160"/>
        <el-table-column label="用工总金额" prop="orderMoney" width="160">
          <template #default="scope">
            <span>{{
              (scope.row.orderQuantity * scope.row.price).toFixed(2)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="auditStatusText" width="160" />
        <el-table-column label="原因" prop="auditText" width="160" />
        <el-table-column label="结算状态" prop="settlementStatusText" width="160" />

        <el-table-column label="操作" fixed="right" width="230">
          <template #default="scope">
            <el-button type="primary" link @click.stop="settlement(scope.row)" v-if="scope.row.settlementStatus!=0">
              结算
            </el-button>
            <el-button v-if="scope.row.auditStatus==0" type="primary" link @click.stop="handleExamine(scope.row)">
              发起流程审批
            </el-button>
            <el-button type="success" link @click.stop="handleDetails(scope.row)">
              详情
            </el-button>
            <el-button type="success" link @click.stop="getExamineList(scope.row)">
              审核详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- pagination -->
      <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <orderFrom ref="refFrom" @submitOk="submitOk" />
    <settlementFrom ref="refSetFrom" @submitOk="submitOk" />
    <examineList ref="examineListRef"></examineList>
  </div>
</template>
